/*
 * @Descripttion:
 * @version:
 * @Author: wujq
 * @Date: 2023-06-01 13:52:17
 * @LastEditors: Andy
 * @LastEditTime: 2023-08-08 18:36:05
 */
import React, { useState, useEffect } from 'react';
import { Modal, List, Typography } from 'antd';
import PropTypes from 'prop-types';
import { _ } from 'core-js';
import '../index.less';
import { actions as netWorkActions } from '@redux/reducer/net-work';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function NetworkTestModal(props) {
  const [netWorkList, setNetWorkList] = useState([]);
  const [moadlLoading, setLoading] = useState(false);
  const { visible, getStatusNetworkTest, getStatusNetwork, filterSacn = false } = props;

  const fetchData = async () => {
    setLoading(true);
    const { payload } = await getStatusNetworkTest();
    getStatusNetwork();
    setLoading(false);
    const messageList = payload || [];
    let list = [];
    const isScan = name => {
      let dictName = { mgmt: '管理口' };
      if (dictName[name]) {
        return dictName[name];
      }
      if (name.includes('work')) {
        // eslint-disable-next-line eqeqeq
        return `工作口${name.substring(4) == 0 ? '' : name.substring(4)}`;
      }
      if (name.includes('scan')) {
        // eslint-disable-next-line eqeqeq
        return `扫描口${name.substring(4) == 0 ? '' : name.substring(4)}`;
      }
    };
    messageList.map(item => {
      list.push({
        title: `${isScan(item.name)}(${item.rawname}) 到 ipv4 ${item.ipv4.address} ${
          item.ipv4.state === 'OK' ? '生效' : '无效'
        }`,
        state: item.ipv4.state === 'OK' ? true : false
      });
      if (item.ipv6) {
        list.push({
          title: `${isScan(item.name)}(${item.rawname}) 到 ipv6 ${item.ipv6.address} ${
            item.ipv6.state === 'OK' ? '生效' : '无效'
          }`,
          state: item.ipv6.state === 'OK' ? true : false
        });
      }
      if (item.gw) {
        list.push({
          title: `${isScan(item.name)}(${item.rawname}) 到 ipv4网关 ${item.gw.address} ${
            item.gw.state === 'OK' ? '连通正常' : '连通异常'
          }`,
          state: item.gw.state === 'OK' ? true : false
        });
      }
      if (item.gw6) {
        list.push({
          title: `${isScan(item.name)}(${item.rawname}) 到 ipv6网关 ${item.gw6.address} ${
            item.gw6.state === 'OK' ? '连通正常' : '连通异常'
          }`,
          state: item.gw6.state === 'OK' ? true : false
        });
      }
      if (item.dns) {
        item.dns.forEach(el => {
          list.push({
            title: `${isScan(item.name)}(${item.rawname}) 到 DNS服务器 ${el.address} ${
              el.state === 'OK' ? '连通正常' : '连通异常'
            }`,
            state: el.state === 'OK' ? true : false
          });
        });
      }
      if (item.public) {
        if (item.public.find(r => r.state === 'OK')) {
          list.push({
            title: `${isScan(item.name)}(${item.rawname}) 到公网连通正常`,
            state: true
          });
        } else {
          list.push({
            title: `${isScan(item.name)}(${item.rawname}) 到公网连通异常`,
            state: false
          });
        }
      }
    });
    if (filterSacn) {
      list = list.filter(r => !r.title?.includes('扫描口'));
    }
    setNetWorkList(list);
  };
  useEffect(() => {
    visible ? fetchData() : setNetWorkList([]);
  }, [visible]);
  return (
    <>
      <Modal
        title="
      网络连通性测试"
        {...props}
        onOk={() => {
          setNetWorkList([]);
          fetchData();
        }}
        confirmLoading={moadlLoading}
        maskClosable={false}
        wrapClassName="network-test-modal"
      >
        {moadlLoading && <p>可测试当前的网络配置是否正确</p>}
        <List
          dataSource={netWorkList}
          style={{ maxHeight: '500px', overflowX: 'hidden' }}
          loading={moadlLoading}
          renderItem={item => (
            <List.Item>
              <Typography.Text>
                <p style={{ color: item.state ? 'green' : 'red', marginBottom: 0 }}>{item.title}</p>
              </Typography.Text>
            </List.Item>
          )}
        />
      </Modal>
    </>
  );
}
NetworkTestModal.propTypes = {
  visible: PropTypes.bool,
  getStatusNetworkTest: PropTypes.func,
  getStatusNetwork: PropTypes.func,
  filterSacn: PropTypes.bool
};

const mapStateToProps = state => {
  return {
    getStatusNetwork: _.get(state, 'netWork.messageList', {})
  };
};
const mapDispatchToProps = dispatch => {
  return {
    ...bindActionCreators(netWorkActions, dispatch)
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(NetworkTestModal);
